<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid yellow;
            text-align: center;
        }
        #mainDiv{
            width: 200px;
            border: 1px solid black;
            background-color: #666666;
        }
        .head{
            background-color: aquamarine;
        }
        .body{
            display: none;
        }

    </style>
    <script>
        function showDiv(divId){
    var divObj=document.getElementById(divId);
    if (divObj.style.display=="block"){
        divObj.style.display="none";
    }else {
        divObj.style.display="block";
    }
        }
    </script>
</head>
<body>
<div id="mainDiv">
    <div class="head" onclick="showDiv('friend')">男生头像</div>
    <div class="body" id="friend">
        <img src="../loginImg/b2.jpg" alt="">
        <img src="../loginImg/b3.jpg" alt="">
        <img src="../loginImg/b4.jpg" alt="">
    </div>
  <div class="head" onclick="showDiv('family')">女生头像造型</div>
  <div class="body" id="family">
      <img src="../loginImg/g2.jpg" alt="">
      <img src="../loginImg/g3.jpg" alt="">
      <img src="../loginImg/g4.jpg" alt="">
  </div>
  <div class="head" onclick="showDiv('blacklist')">动物头像造型</div>
  <div  class="body" id="blacklist">
      <img src="../loginImg/d2.jpg" alt="">
      <img src="../loginImg/d3.jpg" alt="">
      <img src="../loginImg/d4.jpg" alt="">
  </div>
</div>
</body>
</html>